<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
</head>

<body>
    <h1>PDF Viewer</h1>
    <div id="loading">Loading PDF...</div>
    <iframe :src="pdfUrl" width="100%" height="600px"></iframe>

    <script type="module">
        import axios from "./node_modules/axios"

        async function fetchPdf() {
            try {
                const response = await axios.get('/api/getPdf', {
                    responseType: 'blob' // 重要：确保响应类型为 blob
                });

                // 将 Blob 转换为 URL
                const blob = new Blob([response.data], {
                    type: 'application/pdf'
                });
                const url = URL.createObjectURL(blob);

                // 隐藏加载状态，显示 PDF
                document.getElementById('loading').style.display = 'none';
                const iframe = document.getElementById('pdf-viewer');
                iframe.src = url;
                iframe.style.display = 'block';
            } catch (error) {
                console.error('Error fetching PDF:', error);
                document.getElementById('loading').textContent = 'Failed to load PDF';
            }
        }

        // 页面加载时获取 PDF
        fetchPdf();

        // 清理 Blob URL
        window.addEventListener('beforeunload', () => {
            const iframe = document.getElementById('pdf-viewer');
            if (iframe.src) {
                URL.revokeObjectURL(iframe.src);
            }
        });
    </script>
</body>

</html>